<template>
  <div class="login">
    <div class="login-banner">
      <div class="login-card">
        <div class="login-title">
          <img :src="logo" class="login-title-logo"/>
          崇川区排水管网地理信息系统
        </div>

        <el-form
          ref="loginForm"
          :model="loginForm"
          :rules="loginRules"
          class="login-form"
        >
          <el-form-item prop="username" style="margin-bottom:32px !important;">
            <el-input
              v-model="loginForm.username"
              type="text"
              auto-complete="off"
              placeholder="账号"
              prefix-icon="el-icon-user"
            >
            </el-input>
          </el-form-item>
          <el-form-item prop="password" style="margin-bottom:12px !important;">
            <el-input
              v-model="loginForm.password"
              type="password"
              auto-complete="off"
              placeholder="密码"
              @keyup.enter.native="handleLogin"
              prefix-icon="el-icon-lock"
            >
            </el-input>
          </el-form-item>

          <!--      <el-form-item prop="code">-->
          <!--        <el-input-->
          <!--          v-model="loginForm.code"-->
          <!--          auto-complete="off"-->
          <!--          placeholder="验证码"-->
          <!--          style="width: 63%"-->
          <!--          @keyup.enter.native="handleLogin"-->
          <!--        >-->
          <!--          <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />-->
          <!--        </el-input>-->
          <!--        <div class="login-code">-->
          <!--          <img :src="codeUrl" @click="getCode" class="login-code-img"/>-->
          <!--        </div>-->
          <!--      </el-form-item>-->
          <el-checkbox
            v-model="loginForm.rememberMe"
            style="margin:20px 0px 25px 0px; color: rgb(203, 213, 224)"
          >
            记住密码
          </el-checkbox>

          <el-form-item style="width:100%;">
            <el-button
              :loading="loading"
              size="medium"
              type="primary"
              style="width:100%;"
              @click.native.prevent="handleLogin"
            >
              <span v-if="!loading">登 录</span>
              <span v-else>登 录 中...</span>
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <!--  底部  -->
    <div class="el-login-footer">
      <span>
        版权所有 &copy; 2020 南通市崇川区市政设施管理中心  | 技术支持：南通市测绘院有限公司
      </span>
    </div>
  </div>
</template>

<script>
  // import { getCodeImg } from "@/api/login";
  import Cookies from 'js-cookie'
  import {encrypt, decrypt} from '@/utils/jsencrypt'

  import logo from '@/assets/images/login-logo.png'
  import passwordImg from '@/assets/images/login-password.png'

  export default {
    name: 'Login',
    data() {
      return {
        logo,
        passwordImg,
        codeUrl: '',
        cookiePassword: '',
        loginForm: {
          username: '',
          password: '',
          rememberMe: false
          // code: "",
          // uuid: ""
        },
        loginRules: {
          username: [
            {required: true, trigger: 'blur', message: '用户名不能为空'},
          ],
          password: [
            {required: true, trigger: 'blur', message: '密码不能为空'},
          ],
          code: [
            {required: true, trigger: 'change', message: '验证码不能为空'},
          ],
        },
        loading: false,
        redirect: undefined,
      }
    },
    watch: {
      $route: {
        handler: function (route) {
          this.redirect = route.query && route.query.redirect
        },
        immediate: true,
      },
    },
    created() {
      this.getCookie();
    },
    methods: {
      getCookie() {
        const username = Cookies.get('username')
        const password = Cookies.get('password')
        const rememberMe = Cookies.get('rememberMe')
        this.loginForm = {
          // username: username === undefined ? this.loginForm.username : decrypt(username),
          // password: password === undefined ? this.loginForm.password : decrypt(password),
          username: username === undefined ? this.loginForm.username : username,
          password: password === undefined ? this.loginForm.password : password,
          rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
        }
      },
      handleLogin() {
        this.$router.push({path: this.redirect || '/'})
        this.$refs.loginForm.validate((valid) => {
          if (valid) {
            this.loading = true
            if (this.loginForm.rememberMe) {
              // Cookies.set("username", encrypt(this.loginForm.username), {expires: 30});
              // Cookies.set("password", encrypt(this.loginForm.password), {expires: 30});
              Cookies.set("username", this.loginForm.username, {expires: 30});
              Cookies.set("password", this.loginForm.password, {expires: 30});
              Cookies.set('rememberMe', this.loginForm.rememberMe, {expires: 30});
            } else {
              Cookies.remove("username");
              Cookies.remove("password");
              Cookies.remove('rememberMe');
            }

            // let encryptUserName = encrypt(encodeURIComponent(this.loginForm.username))
            // let encryptUserName = encrypt(this.loginForm.username)
            // let encryptPwd = encrypt(this.loginForm.password)
            let obj = {
              // username: encryptUserName,
              username: this.loginForm.username,
              password: this.loginForm.password
            }
            this.$store
              .dispatch('user/login', obj)
              .then(() => {
                this.$router.push({path: this.redirect || '/'})
              })
              .catch(() => {
                this.loading = false
                // this.getCode()
              })
          }
        })
      },
    },
  }
</script>

<style lang="scss" scoped>
  /deep/ .el-button {

  }

  .prefix {
    width: 14px;
    height: 14px;
  }

  .login {
    min-width: 1680px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    background-image: url('../../assets/images/login-bg.jpg');
    background-size: cover;

    .login-banner {
      width: 1100px;
      height: 600px;
      background-image: url('../../assets/images/login-banner.png');
      background-size: cover;

      display: flex;
      flex-direction: row-reverse;
    }
  }

  .login-card {
    display: flex;
    flex-direction: column;
    align-items: center;

    padding-top: 132px;
  }

  .login-title {
    display: flex;
    flex-direction: row;
    align-items: center;

    font-size: 24px;

    margin: 0;
    text-align: center;
    color: #fff;
    height: 60px;
    line-height: 60px;
  }

  .login-title-logo {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin-right: 16px;
  }

  .login /deep/ .el-form-item {
    margin-bottom: 32px !important;
  }

  .login /deep/ .el-input .el-input__inner {
    height: 40px;
    line-height: 40px;
  }

  .login /deep/ .el-input__icon {
    color: #667fea;
  }

  .login /deep/ .el-button {
    font-size: 16px !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }

  .login-form {
    border-radius: 4px;
    width: 550px;
    padding: 35px 150px 50px 160px;
    .el-input {
      height: 40px;
      input {
        height: 40px;
      }
    }
    .input-icon {
      height: 40px;
      width: 14px;
      margin-left: 2px;
    }
  }

  .login-tip {
    font-size: 13px;
    text-align: center;
    color: #bfbfbf;
  }

  .login-code {
    width: 33%;
    height: 38px;
    float: right;
    img {
      cursor: pointer;
      vertical-align: middle;
    }
  }

  .el-login-footer {
    height: 40px;
    line-height: 40px;
    position: fixed;
    bottom: 0;
    width: 100%;
    text-align: center;
    color: #cbd5e0;
    font-family: Arial;
    font-size: 12px;
    letter-spacing: 1px;
  }

  .login-code-img {
    height: 38px;
  }

  .el-checkbox__input.is-checked + .el-checkbox__label {
    color: rgb(203, 213, 224) !important;
  }

  .el-notification__group {
    margin-top: 4px !important;
  }

  .el-notification {
    right: 700px!important;
  }
</style>
